﻿<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="../css/index_second.css"/>
    <link rel="stylesheet" href="../css/bootstrap.min.css">
    <link  rel="stylesheet" href="../css/zhongxiaodie.css">
    <link rel="stylesheet" href="../css/index.css">
    <title>ACE公司管理系统</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script>
        var cookie = document.cookie.split('; ');
        var value ='';
        cookie.forEach(function(val,index){
            if(val.split('=')[0] == 'pwd1'){
                value = val.split('=')[1];
            }
        });
        if(value == '123'){

        }
        else{
            alert('登录时间已过期，请重新登录');
            location.href = '../k_index.html';
        }
    </script>
    <style>
        @media screen and (max-width: 992px){

        }
        @media screen and (max-width:992px){
            .body_right_left_xiao{
                display: none;
            }
            .body_right_left_xiao{
                display: block;
            }
            .body_left{
                display: none;
            }
            .body_right{
                margin-left: 0;
            }
            .body_right_middle{
                margin-left: 0;
            }
            .s1{
                margin-left: 0;
            }
        }
        @media screen and (max-width: 768px){
            #main1{width: 100%;}
            #main2{width: 100%;}
            #main3{width: 100%;}
            #main4{width: 100%;}
        }
        .box2_a3{
            width: 60px;
            height: 40px;
            background: #2a6496;
            text-align: center;
            color: #ffffff;
            font-size: 24px;
            line-height: 40px;
            float: right;
            margin-right: 30px;
        }
    </style>
    <script src="../js/jquery-3.2.0.min.js"></script>
    <script src="../js/echarts.min.js"></script>
    <script src="../js/zhongxiaodie.js"></script>
    <script src="../js/base.js"></script>
</head>
<body>
<div class="container">
    <div class="row header">
        <div>
            <span class="glyphicon glyphicon-leaf"></span>
            <span>ACE公司管理系统</span>
            <a href="JavaScript:;" class="box2_a3">退出</a>
        </div>
    </div>
    <div class="body_left">
        <p>
            <span class="glyphicon glyphicon-signal"></span>
            <span class="glyphicon glyphicon-pencil"></span>
            <span class="glyphicon glyphicon-user"></span>
            <span class="glyphicon glyphicon-cog"></span>
        </p>
        <p class="shou">
            <span class="glyphicon glyphicon-home"></span>
            <span>首页</span>
        </p>
        <p class="tian">
            <span class="glyphicon glyphicon-edit"></span>
            <span>员工添加</span>
        </p>
        <p class="xiu">
            <span class="glyphicon glyphicon-edit"></span>
            <span>数据修改</span>
        </p>
        <p class="kao">
            <span class="glyphicon glyphicon-edit"></span>
            <span>考勤查询</span>
        </p>
        <p class="tu" style="background-color: #FFFFFF">
            <span class="glyphicon glyphicon-edit"></span>
            <span>考勤比例图</span>
        </p>
        <p class="su" >
            <span class="glyphicon glyphicon-edit"></span>
            <span>搜索</span>
        </p>
    </div>
    <div class="body_right">
        <div class="body_right_top">
            <a class="body_right_left_xiao glyphicon glyphicon-align-justify">MENU</a>
            <span class="glyphicon glyphicon-home"></span>
            <span>首页</span>
                <span class="s1">
                    员工搜索：
                    <input type="text" placeholder="编号/身份证/名字/性别" id="sousuo_l">
                    <span class="glyphicon glyphicon-search" id="sousuo_l2" style="cursor: pointer"></span>
                </span>
        </div>
        <div class="body_right_middle">
            <div class="box">
                <div id="sanxing" style="width: 400px;height: 400px;float: left"></div>
                <div id="sanxing_age" style="width: 400px;height: 400px; float:left;margin-left: 80px;"></div>
            </div>
        </div>
    </div>
</div>
</body>
</html>
<script>
    var sex_x=0,sex_y= 0,age_x=0,age_y=0,age_z=0,age_a=0;
    $.ajax({
        url:'http://127.0.0.1:8000/craate',
        type:'get',
        dataType:'jsonp',
        success: function (data, status) {
            $.each(data.cont, function (index, val) {
                ere();
                art();
                if(val.sex=="男"){
                    sex_x+=1;
                }
                if(val.sex=="女"){
                    sex_y+=1;
                }
                if(val.age >=18 && val.age < 25){
                    age_x+=1;
                }
                if(val.age >=26 && val.age < 35){
                    age_y+=1;
                }
                if(val.age >=36 && val.age < 45){
                    age_z+=1;
                }
                if(val.age >=46 && val.age < 55){
                    age_a+=1;
                }
                if(val.age<18 && val.age>55){
                    alert("数据库数据有误")
                }
            });
        },

        error: function (err) {
            console.log(err);
        }
    });
    function art(){
        var myChart = echarts.init(document.getElementById('sanxing'));
        var option = {
            title : {
                text: '某站点用户访问来源',
                subtext: '男女sex比例',
                x:'center'
            },
            tooltip : {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            legend: {
                orient: 'vertical',
                right: 'right',
                data: ['男生','女生']
            },
            series : [
                {
                    name: '访问来源',
                    type: 'pie',
                    radius : '55%',
                    center: ['50%', '60%'],
                    data:[
                        {value:sex_x, name:'男生'},
                        {value:sex_y, name:'女生'},
                    ],
                    itemStyle: {
                        emphasis: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        },
                        normal:{
                            label:{
                                show:false
                            }
                        }
                    }
                }
            ]
        };
        myChart.setOption(option);
    }
    //----------------------------er
    function ere(){
        var myChartFc = echarts.init(document.getElementById('sanxing_age'));
        optionee = {
            title : {
                text: '某站点用户访问来源',
                subtext: '男女年龄人数比例',
                x:'center'
            },
            color: ['#3398DB'],
            tooltip : {
                trigger: 'axis',
                axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                    type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                }
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis : [
                {
                    type : 'category',
                    data : ['18~25', '26~35', '36~45', '46~55'],
                    axisTick: {
                        alignWithLabel: true
                    }
                }
            ],
            yAxis : [
                {
                    type : 'value'
                }
            ],
            series : [
                {
                    name:'直接访问',
                    type:'bar',
                    barWidth: '60%',
                    data:[age_x, age_y, age_z,age_a]
                }
            ]
        };
        myChartFc.setOption(optionee);
    }
    //    //----------------------------------------------
    $('.box2_a3').on('click',function () {
        window.location.href = '../k_index.html';
    })
</script>